<!-- 车型管理 -->
<template>
  <div class="dashboard-container car-models customer-list-box">
    <!-- 顶部搜索 -->
    <el-card>
      <el-form
        :inline="true"
        :model="selectForm"
        class="demo-form-inline"
      >
        <el-form-item label="车型编号:">
          <el-input
            v-model="selectForm.id"
            placeholder="请输入车型编号"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item label="应载重量：">
          <el-select
            v-model="selectForm.allowableLoad"
            placeholder="请选择应载重量"
            style="width: 270px;"
          >
            <el-option
              label="<1.8（吨）"
              value="RANGE_LEVEL_1"
            ></el-option>
            <el-option
              label="1.8-6（吨）"
              value="RANGE_LEVEL_2"
            ></el-option>
            <el-option
              label="6-14（吨）"
              value="RANGE_LEVEL_3"
            ></el-option>
            <el-option
              label="14-30（吨）"
              value="RANGE_LEVEL_4"
            ></el-option>
            <el-option
              label="30-50（吨）"
              value="RANGE_LEVEL_5"
            ></el-option>
            <el-option
              label="50-100（吨）"
              value="RANGE_LEVEL_6"
            ></el-option>
            <el-option
              label="100>（吨）"
              value="RANGE_LEVEL_7"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车型体积：">
          <el-select
            v-model="selectForm.allowableVolume"
            placeholder="请选择应载重量"
            style="width: 270px;"
          >
            <el-option
              label="<3（m³）"
              value="RANGE_LEVEL_1"
            ></el-option>
            <el-option
              label="'3-5（m³）"
              value="RANGE_LEVEL_2"
            ></el-option>
            <el-option
              label="5-10（m³）"
              value="RANGE_LEVEL_3"
            ></el-option>
            <el-option
              label="10-15（m³）"
              value="RANGE_LEVEL_4"
            ></el-option>
            <el-option
              label="15-30（m³）"
              value="RANGE_LEVEL_5"
            ></el-option>
            <el-option
              label="30-50（m³）"
              value="RANGE_LEVEL_6"
            ></el-option>
            <el-option
              label="50-80（m³"
              value="RANGE_LEVEL_7"
            ></el-option>
            <el-option
              label="80-150（m³）"
              value="RANGE_LEVEL_8"
            ></el-option>
            <el-option
              label="150>（m³）"
              value="RANGE_LEVEL_9"
            ></el-option>

          </el-select>
        </el-form-item>
        <el-form-item label="车型类型:">
          <el-input
            v-model="selectForm.name"
            placeholder="请输入车型类型"
            style="width: 300px;"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            type="danger"
            @click="handleSelect"
          >查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button
            @click="handleReset"
          >重置</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <!-- 渲染列表 -->
    <el-card style="margin-bottom:55px">
      <el-button
        type="danger"
        style="margin: 10px 0 20px 0;"
        @click="openDialog('add')"
      >新增车型</el-button>
      <el-table
        :data="carList"
        stripe
        style="width: 100%"
      >
        <el-table-column
          type="index"
          width="65"
          label="序号"
        >
        </el-table-column>
        <el-table-column
          prop="id"
          label="车型编号"
          width="200"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="车辆类型"
        >
        </el-table-column>
        <el-table-column
          prop="num"
          label="车型数量"
        >
        </el-table-column>
        <el-table-column
          prop="allowableLoad"
          label="应载重量(吨)"
        >
        </el-table-column>
        <el-table-column
          prop="allowableVolume"
          label="应载体积(立方米)"
        >
        </el-table-column>
        <el-table-column
          prop="measureLong"
          label="长(米)"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="measureWidth"
          label="宽(米)"
          width="90"
        >
        </el-table-column>
        <el-table-column
          prop="measureHigh"
          label="高(米)"
          width="90"
        >
        </el-table-column>

        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              type="text"
              @click="openDialog('edit', row.id)"
            >编辑</el-button>
            <div style="display: inline-block;vertical-align: middle;color:#E3E3E3">|</div>
            <el-button
              type="text"
              style="color: #F56C6C ;"
              @click="openDialog('delete', row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          :current-page="page"
          :page-sizes="[8, 10, 13, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>
    <!-- 对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span v-if="title === '确认删除'">
        <div style="text-align: left; color:#20232A">确认要删除吗？</div>
      </span>
      <span v-else>
        <el-form
          ref="dialogForm"
          :model="dialogForm"
          :rules="rules"
          label-width="100px"
        >
          <el-form-item
            label="车辆类型"
            prop="name"
          >
            <el-input
              v-model="dialogForm.name"
              placeholder="请输入车辆类型"
            ></el-input>
          </el-form-item>
          <el-form-item
            label="应载重量"
            prop="allowableLoad"
            style="position: relative;"
          >
            <div class="dw">吨</div>
            <el-input
              v-model="dialogForm.allowableLoad"
              placeholder="请输入车型载重"
            >
            </el-input>
          </el-form-item>
          <el-form-item
            label="应载体积"
            prop="allowableVolume"
            style="position: relative;"
          >
            <div class="dw">立方</div>
            <el-input
              v-model="dialogForm.allowableVolume"
              placeholder="请输入车型体积"
            ></el-input>
          </el-form-item><el-form-item
            label="长"
            prop="measureLong"
            style="position: relative;"
          >
            <div class="dw">米</div>

            <el-input
              v-model="dialogForm.measureLong"
              placeholder="0.0"
            ></el-input>
          </el-form-item><el-form-item
            label="宽"
            prop="measureWidth"
            style="position: relative;"
          >
            <div class="dw">米</div>

            <el-input
              v-model="dialogForm.measureWidth"
              placeholder="0.0"
            ></el-input>
          </el-form-item><el-form-item
            label="高"
            prop="measureHigh"
            style="position: relative;"
          >
            <div class="dw">米</div>

            <el-input
              v-model="dialogForm.measureHigh"
              placeholder="0.0"
            ></el-input>
          </el-form-item>

        </el-form>
      </span>
      <span
        v-if="title === '确认删除'"
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="handleClose">取 消</el-button>
        <el-button
          type="danger"
          @click="handleConfirm"
        >确 定</el-button>
      </span>
      <span
        v-else
        slot="footer"
        class="dialog-footer"
      >
        <div style="text-align:center; margin-bottom:10px">
          <el-button @click="handleClose">取 消</el-button>
          <el-button
            type="danger"
            @click="handleConfirm('add')"
          >确 定</el-button>
        </div>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { getCarListAPI, getCarListPageAPI, deleteCarAPI, addCarAPI, getCarDetailAPI, updateCarDetailAPI } from '@/api/carmodels'
export default {
  data() {
    return {
      carList: [],
      page: 1,
      pageSize: 10,
      total: 0,
      dialogVisible: false,
      title: '',
      deleteId: '',
      dialogForm: {},
      selectForm: {
        id: '',
        allowableLoad: '',
        allowableVolume: '',
        name: ''
      },
      rules: {
        name: [
          { required: true, message: '请输入车辆类型', trigger: 'blur' }
        ],
        allowableLoad: [
          { required: true, message: '请输入应载重量', trigger: 'blur' }
        ],
        allowableVolume: [
          { required: true, message: '请输入应载体积', trigger: 'blur' }
        ],
        measureLong: [
          { required: true, message: '请输入车辆长', trigger: 'blur' }
        ],
        measureWidth: [
          { required: true, message: '请输入车辆宽', trigger: 'blur' }
        ],
        measureHigh: [
          { required: true, message: '请输入车辆高', trigger: 'blur' }
        ]
      }
    }
  },
  mounted() {
    // this.getCarList()
    this.getCarListPage()
  },
  methods: {
    // 处理重置
    handleReset() {
      this.page = 1
      this.pageSize = 10
      this.selectForm = {
        id: '',
        allowableLoad: '',
        allowableVolume: '',
        name: ''
      }
      this.getCarListPage()
    },
    // 处理搜索筛选
    handleSelect() {
      console.log(this.selectForm)
      this.page = 1
      this.pageSize = 10
      this.getCarListPage()
    },
    // 关闭弹窗清空数据
    handleClose() {
      this.dialogForm = {}
      this.dialogVisible = false
      this.$refs.dialogForm.resetFields()
    },
    // 处理打开弹窗
    async openDialog(type, id) {
      if (type === 'delete') {
        this.title = '确认删除'
        this.deleteId = id
      }
      if (type === 'add') this.title = '新增车型'
      if (type === 'edit') {
        this.title = '编辑车型'
        const res = await getCarDetailAPI(id)
        this.dialogForm = res.data
      }
      this.dialogVisible = true
    },
    // 处理弹框确认 新增 编辑 删除
    async handleConfirm() {
      if (this.title === '新增车型') await addCarAPI(this.dialogForm)
      if (this.title === '确认删除') await deleteCarAPI(this.deleteId)
      if (this.title === '编辑车型') await updateCarDetailAPI(this.dialogForm)
      this.getCarListPage()
      this.$message.success('操作成功')
      this.handleClose()
    },
    // 获取车辆类型列表
    async getCarList() {
      const res = await getCarListAPI()
      this.carList = res.data
    },
    // 获取车辆类型分页数据
    async getCarListPage() {
      const res = await getCarListPageAPI({ page: this.page, pageSize: this.pageSize, ...this.selectForm })
      console.log(res)
      this.carList = res.data.items
      this.total = Number(res.data.counts)
    },
    // pageSize变化时触发
    handleSizeChange(current) {
      console.log(this.pageSize, current)
      this.pageSize = current
      this.getCarListPage()
    },
    // currentPage 改变时会触发
    handleCurrentChange(current) {
      console.log(this.page, current)
      this.page = current
      this.getCarListPage()
    }
  }
}
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-card {
  margin: 15px 20px;
}

::v-deep .el-form-item__label {
  color: #606266;
  font-weight: 400;
}

::v-deep .el-dialog__close:hover {
  color: #000;
}
.block {
  text-align: center;
  margin-top: 30px;
}
.add-btn{
  margin-bottom: 20px;
}
.alert {
  margin: 10px 0px;
}
.pagination {
  margin-top: 40px;
  padding-bottom: 0px;
}

.el-select {
  width: 100%;
}

.car-models ::v-deep .el-table td,
.el-table th {
  padding: 12px 0;
  min-width: 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  text-overflow: ellipsis;
  vertical-align: middle;
  position: relative;
  text-align: left;
  overflow: hidden;
}
.car-models {
  ::v-deep .el-dialog__title {
    width: 73px;
    height: 25px;
    font-size: 18px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    text-align: left;
    color: #20232a;
    line-height: 25px;
    letter-spacing: 0px;
  }
  ::v-deep .el-dialog__body {
    text-align: center;
    padding: 40px 60px 0 30px;
  }
  .warn-img {
    width: 40px;
  }
  p {
    height: 24px;
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Regular;
    font-weight: 400;
    color: #818693;
    line-height: 24px;
  }
}

.dw {
  position: absolute;
  right: 20px;
  z-index: 1;
}
</style>
